<template>
	<gracePage headerBG="#1CA376" :bounding="false">
		<view slot="gHeader">
			<view class="grace-header-body grace-relative main-bg-color">
				<text class="grace-header-icons your-icon iconxiangzuo font-size-34 grace-white" style="" @tap="appFn.navigateBackFn"></text>
				<!-- 中间内容 -->
				<view class="grace-header-content-noflex py-1-5 px-3 text-center grace-white">
					<text class="grace-h4 font-size-36 text-center" style="font-size:36rpx;">余额</text>
				</view>
				<!-- 消息按钮 -->
				<view class="grace-header-icons "></view>
			</view>
		</view>
		<view slot="gBody">
			<view class="top-bg">
				<view class="" style="position:relative;">
					<view class="" style="position:relative;">
						<image src="/static/images/application_bg.png" class="width-full" mode="widthFix"></image>
						<!-- <text class="" style="position:absolute; left:0; bottom:0;">标题在图片上</text> -->
					</view>
					<view class="grace-center-view">
						<view class="grace-h2 grace-white text-center">
							<text class="grace-h4">￥</text>
							<text>{{ userInfo.user_money }}</text>
						</view>
					</view>
				</view>
			</view>
			<view id="gBody">
				<view class="SegmentedControlIn grace-top-box">
					<graceSegmentedControl :items="cates" :current="current" @change="change" color="#000000" bgColor="#FFFFFF"></graceSegmentedControl>
				</view>
				<divider></divider>
				<scroll-view scroll-y class="grace-list" :style="{ height: scrollHeight + 'px' }" @scrolltolower="scrolltolower">
					<view class="grace-list-items grace-body background-wt" v-for="(item, index) in logs" :key="index">
						<view class="grace-list-body grace-border-b">
							<view class="grace-list-title">
								<text class="grace-list-title-text">余额变更</text>
								<text class="grace-list-title-desc" style="width: 440rpx;">￥{{ item.user_money }}</text>
							</view>
							<view class="grace-list-title">
								<text class="grace-list-title-text">变更原因</text>
								<text class="grace-list-title-desc" style="width: 440rpx;">{{ item.change_desc }}</text>
							</view>

							<view class="grace-list-body-desc">{{ item.change_time }}</view>
						</view>
					</view>
					<view class="grace-list-items mr-3" :class="{ animate1: !graceFullLoading }" v-for="(item, index) in lists" :key="index">
						<!-- <view class="grace-list-image"><image class="grace-list-image" src="https://graceui.oss-cn-beijing.aliyuncs.com/faces/2.png" mode="widthFix"></image></view> -->
						<view class="grace-list-body">
							<view class="grace-list-title">
								<text class="grace-list-title-text" style="font-size: 28px;">提现金额</text>
								<text class="grace-list-title-desc" style="font-size: 32rpx;">{{ item.amount }}</text>
							</view>
							<view class="grace-list-title">
								<text class="grace-list-title-text grace-black9">{{ item.add_time }}</text>
								<text
									class="grace-list-title-desc "
									:class="{ 'main-font-color': item.is_paid == '0', 'grace-green': item.is_paid == '1', 'grace-red': item.is_paid == '3' }"
									style="font-size: 24rpx;"
								>
									{{ item.status }}
								</text>
							</view>
							<view class="grace-list-title" v-if="item.is_paid == '3'">
								<text class="grace-list-title-text grace-black9">审核备注</text>
								<text class="grace-list-title-desc ">{{ item.admin_note }}</text>
							</view>
							<!-- <view class="grace-list-body-desc">描述信息</view> -->
						</view>
					</view>
					<graceLoading :loadingType="loadingType"></graceLoading>
				</scroll-view>
			</view>
		</view>
		<!-- 底部导航 -->
		<view class="grace-footer" slot="gFooter">
			<view class="pb-4 mx-3"><button type="primary" class="grace-button" @click="toNavigateTo('/pages/homeBox/applicationPay/applicationPay')">提现</button></view>
		</view>
	</gracePage>
</template>
<script>
import gracePage from '@/graceUI/components/gracePage.vue';
import graceLoading from '@/graceUI/components/graceLoading.vue';
import graceSegmentedControl from '@/graceUI/components/graceSegmentedControl.vue';
import graceFullLoading from "@/graceUI/components/graceFullLoading.vue";
import { mapState } from 'vuex';
var graceJS = require('@/Grace.JS/grace.js');
export default {
	data() {
		return {
			 graceFullLoading : false,
			oneGoStatus: true,
			scrollHeight: 800,
			logs: [],
			lists: [],
			page: 1,
			loadingType: 3, // 加载更多的loading,
			cates: ['津贴明细', '提现记录'],
			current: 0
		};
	},
	computed: {
		...mapState({
			userInfo: state => state.user.userInfo
		})
	},
	onShow() {
		uni.$on('extractAmount', () => {
			console.log('extractAmount');
			this.page = 1;
			this.lists = [];
			this.__init2();
			// 清除监听
		});
	},
	async onReady() {
		let _this = this,sheight = 0;
		uni.getSystemInfo({
			success(res) {
				sheight = res.windowHeight;
			}
		});
		graceJS.select('.grace-footer', res2 => {
			graceJS.select('.grace-top-box', res3 => {
				graceJS.select('.top-bg', res4 => {
					_this.scrollHeight = sheight - (res2.height + res3.height + res4.height + 80);
				});
			});
		});
	},
	onLoad: function() {
		this.__init();
	},
	methods: {
		__init() {
			this.loadingType = 1;
			// this.graceFullLoading = true;
			let options = {
				act: 'finance_list',
				page: this.page,
				number: 10,
				fin_type: 'user_money'
			};
			this.$HTTP.post('/api/api.php', options, { token: true }).then(data => {
				if (data.error) {
					if (this.page == 1) {
						this.loadingType = 4;
					} else {
						this.loadingType = 2;
					}
					return;
				}
				console.log('data', data);
				this.logs = this.logs.concat(data.list);
				this.loadingType = 3;
				this.page = this.page + 1;
			});
		},
		__init2() {
			console.log('你已经刷新页面数据')
			this.loadingType = 1;
			let options = {
				act: 'withdraw_list',
				page: this.page
			};
			this.$HTTP.post('/api/api.php', options, { token: true }).then(data => {
				console.log('数据为',data)
				if (data.error) {
					if (this.page == 1) {
						this.loadingType = 4;
					} else {
						this.loadingType = 2;
					}
					return;
				}

				this.lists = this.lists.concat(data.list);
				console.log('合并的数据',this.lists)
				this.loadingType = 3;
				this.page = this.page + 1;
			});
		},
		toNavigateTo(url) {
			if (this.oneGoStatus) {
				this.oneGoStatus = false;
				uni.navigateTo({
					url: url,
					complete: () => {
						this.oneGoStatus = true;
					}
				});
			}
		},
		// 上拉加载更多
		scrolltolower() {
			if (this.loadingType != 3) {
				return;
			}
			// 0 加载津贴  1 加载余额
			
			if(this.current == 0){
				this.__init();
			}else{
				this.__init2();
			}
			console.log('1111111111111111');
		},
		change: function(e) {
			this.logs = [];
			this.lists = [];
			this.loadingType = 3;
			this.page = 1;
			this.current = e;
			if (e == 0) {
				this.__init();
			} else {
				this.__init2();
				// this.finTypeNum = 7;
			}
		},
		gotoExtract() {}
	},
	onUnload() {
		// 移除监听事件
		uni.$off('extractAmount');
	},
	components: { gracePage, graceLoading, graceSegmentedControl }
};
</script>
<style scoped>
.grace-footer {
	box-shadow: 1px 1px 6px #ffffff;
}
.background-wt {
	background: #ffffff;
}
</style>
